<template>
	<view>
		<view>
			<view class="title-box" @click="firstShow = !firstShow">
				<view class="title-text">综合安防</view>
				<u-icon name="arrow-down" v-if="firstShow"></u-icon>
				<u-icon name="arrow-right" v-else></u-icon>
			</view>
			<view class="business-main" v-show="firstShow">
				<view class="item-box" v-for="item in firstList" :key="item.id" @click="firstJump(item)">
					<!-- 为兼容微信小程序,图片路径需要使用如下绝对路径 -->
					<u-image class="button-ripple" width="80rpx" height="80rpx" :src="item.imgUrl"></u-image>
					<view class="business-title">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="title-box" @click="secondShow = !secondShow">
				<view class="title-text">运营管理</view>
				<u-icon name="arrow-down" v-if="secondShow"></u-icon>
				<u-icon name="arrow-right" v-else></u-icon>
			</view>
			<view class="business-main" v-show="secondShow">
				<view class="item-box" v-for="item in secondList" :key="item.id" @click="secondJump(item)">
					<u-image class="button-ripple" width="80rpx" height="80rpx" :src="item.imgUrl"></u-image>
					<view class="business-title">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="title-box" @click="thirdShow = !thirdShow">
				<view class="title-text">地图</view>
				<u-icon name="arrow-down" v-if="secondShow"></u-icon>
				<u-icon name="arrow-right" v-else></u-icon>
			</view>
			<view class="business-main" v-show="thirdShow">
				<view class="item-box" v-for="item in thirdList" :key="item.id" @click="thirdJump(item)">
					<u-image class="button-ripple" width="80rpx" height="80rpx" :src="item.imgUrl"></u-image>
					<view class="business-title">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="title-box" @click="forthShow = !forthShow">
				<view class="title-text">扫码</view>
				<u-icon name="arrow-down" v-if="forthShow"></u-icon>
				<u-icon name="arrow-right" v-else></u-icon>
			</view>
			<view class="business-main" v-show="forthShow">
				<view class="item-box" v-for="item in forthList" :key="item.id" @click="forthJump(item)">
					<u-image class="button-ripple" width="80rpx" height="80rpx" :src="item.imgUrl"></u-image>
					<view class="business-title">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstShow: true,
				// 为兼容微信小程序,图片路径需要使用如下绝对路径
				firstList: [{
						'id': '01',
						'title': '任务调度',
						'imgUrl': '/static/images/business/taskIcon.png',
						'count': 0
					},
					{
						'id': '02',
						'title': '手动告警',
						'imgUrl': '/static/images/business/manaulIcon.png',
						'count': 0
					},
					{
						'id': '03',
						'title': '设备信息',
						'imgUrl': '/static/images/business/deviceIcon.png',
						'count': 0
					},
					{
						'id': '04',
						'title': '智能巡更',
						'imgUrl': '/static/images/business/operationIcon.png',
						'count': 12
					}
				],
				secondShow: true,
				secondList: [{
						'id': '01',
						'title': '运营监控',
						'imgUrl': '/static/images/business/monitorIcon.png'
					},
					{
						'id': '02',
						'title': '报事报修',
						'imgUrl': '/static/images/business/warrantyIcon.png'
					},
					{
						'id': '03',
						'title': '财务报告',
						'imgUrl': '/static/images/business/moneyIcon.png'
					},
					{
						'id': '04',
						'title': '一言',
						'imgUrl': '/static/images/business/otherIcon.png'
					}
				],
				thirdShow: false,
				thirdList: [{
					'id': '01',
					'title': '标准地图',
					'imgUrl': '/static/images/business/mapIcon.png'
				}, {
					'id': '02',
					'title': '个性地图',
					'imgUrl': '/static/images/business/mapIcon.png'
				}, {
					'id': '03',
					'title': '轨迹动画',
					'imgUrl': '/static/images/business/mapIcon.png'
				}, {
					'id': '04',
					'title': '地铁地图',
					'imgUrl': '/static/images/business/mapIcon.png'
				}, {
					'id': '05',
					'title': '地图定位',
					'imgUrl': '/static/images/business/mapIcon.png'
				}, {
					'id': '06',
					'title': '交通流量',
					'imgUrl': '/static/images/business/mapIcon.png'
				}, {
					'id': '07',
					'title': '聚合图标',
					'imgUrl': '/static/images/business/mapIcon.png'
				}, {
					'id': '08',
					'title': 'Vue地图',
					'imgUrl': '/static/images/business/mapIcon.png'
				}, {
					'id': '09',
					'title': '区域打卡',
					'imgUrl': '/static/images/business/mapIcon.png'
				}],
				forthShow: true,
				forthList: [{
					'id': '01',
					'title': '扫码信息',
					'imgUrl': '/static/images/business/scanCode.png'
				}],
				isAbsolute: true
			}
		},
		methods: {
			firstJump(item) {
				if (item.id == '01') {
					uni.navigateTo({
						url: '../taskCenter/index'
					})
				} else if (item.id == '04') {
					// let externalPageUrl = encodeURIComponent('https://universal.u-cold.com:18443/video/#/?type=record&deviceId=1003708$1$0$46')
					let externalPageUrl = encodeURIComponent(
						'https://universal.u-cold.com:18443/video/#/?type=real&deviceId=1000011$1$0$64')
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				}
			},
			secondJump(item) {
				if (item.id == '01') {
					uni.navigateTo({
						url: '../monitorCenter/index'
					})
				} else if (item.id == '02') {
					uni.navigateTo({
						url: '../repairList/index'
					})
				} else if (item.id == '03') {
					uni.navigateTo({
						url: '../financialReport/index'
					})
				} else if (item.id == '04') {
					let externalPageUrl = 'https://www.cikeee.com/'
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				}
			},
			thirdJump(item) {
				if (item.id == '01') {
					let externalPageUrl = '/hybrid/html/baiduMap/baiduMap.html'
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				} else if (item.id == '02') {
					let externalPageUrl = '/hybrid/html/baiduMap/baiduMapPro.html'
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				} else if (item.id == '03') {
					let externalPageUrl = '/hybrid/html/baiduMap/baiduMapTrack.html'
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				} else if (item.id == '04') {
					let externalPageUrl = '/hybrid/html/baiduMap/baiduMapSubway.html'
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				} else if (item.id == '05') {
					let externalPageUrl = '/hybrid/html/baiduMap/baiMapLocation.html'
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				} else if (item.id == '06') {
					let externalPageUrl = '/hybrid/html/baiduMap/baiduMapTraffic.html'
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				} else if (item.id == '07') {
					let externalPageUrl = '/hybrid/html/baiduMap/baiduMapCluster.html'
					uni.navigateTo({
						url: '../externalPage/webview?url=' + externalPageUrl
						// page.json定义的路径 传url 到webview界面去接收 实现跳转
					})
				} else if (item.id == '08') {
					uni.navigateTo({
						url: '../map/bdMapApp'
					})
				} else if (item.id == '09') {
					uni.navigateTo({
						url: '../map/bdMapClockIn'
					})
				}
			},
			forthJump(item) {
				if(item.id = "01") {
					uni.navigateTo({
						url: '/subPages/scanCode/index'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.title-box {
		background-color: #ffffff;
		margin: 25rpx 26rpx 0 26rpx;
		padding: 20rpx;
		border-bottom: 1px dashed #DCDFE6;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title-text {
			margin-left: 10rpx;
			font-weight: 600;
			letter-spacing: 2rpx;
		}
	}

	.business-main {
		background-color: #ffffff;
		margin: 0 26rpx 20rpx 26rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.item-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 20rpx;
			width: calc((100% - 160rpx) / 4);

			.business-title {
				margin-top: 20rpx;
				font-size: 26rpx;
			}

			.button-ripple {
				overflow: hidden;
				position: relative;
				transition: background-color 0.3s linear, border 0.3s linear;

				&:after {
					content: "";
					display: block;
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					pointer-events: none;
					background-image: radial-gradient(circle,
							#000 10%,
							rgba(0, 0, 0, 0) 10.01%);
					background-repeat: no-repeat;
					background-position: 50%;
					transform: scale(10);
					opacity: 0;
					transition: transform 0.5s, opacity 1s;
				}

				&:active:after {
					transform: scale(0);
					opacity: 0.1;
					transition: 0s;
				}
			}
		}
	}
</style>